<script setup>
import { computed, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { ElAvatar, ElTooltip } from 'element-plus';
import defaultAvatar from '@/assets/images/img/默认头像.png';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { useSystemStore, useUserStore } from '@/stores';

const props = defineProps({
  screenTitle: String,
});
const { screenTitle } = toRefs(props);

const router = useRouter();
const userStore = useUserStore();
const systemStore = useSystemStore();

const avatarURL = computed(() => {
  return !userStore?.userInfo?.avatar ? defaultAvatar : userStore?.userInfo?.avatar;
});

const handleHome = (path) => {
  router.push(path);
};

const handlePersonalCenter = () => {
  systemStore.SET_PERSONAL_SHOW(true);
};
</script>
<template>
  <div class="header-screen-index">
    <div class="bg-icon-box">{{ screenTitle }}</div>
    <div class="bg-color-white"></div>
    <div class="bg-color-black"></div>
    <div class="bg-header"></div>

    <div class="absolute right-5 top-3 z-3 flex items-center">
      <ElTooltip :content="'工作台'" placement="bottom">
        <SvgIconIndex
          icon-class="client"
          size="28px"
          class="mr-10px cursor-pointer"
          title="首页"
          @click="() => handleHome('/grid-system/workbench')"
        />
      </ElTooltip>
      <ElTooltip :content="'返回首页'" placement="bottom">
        <SvgIconIndex
          icon-class="homepage"
          size="30px"
          class="mr-10px cursor-pointer"
          title="首页"
          @click="() => handleHome('/launch')"
        />
      </ElTooltip>

      <ElAvatar
        :size="40"
        :src="avatarURL"
        @click="
          () => {
            handlePersonalCenter();
          }
        "
      />
      <p class="ml-5px mr-20px">{{ userStore?.userInfo?.username }}</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-screen-index {
  position: absolute;
  z-index: 20;
  width: 100%;
  height: 100px;
  color: #fff;
  .bg-icon-box {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding-top: 18px;
    font-size: 40px;
    font-family: $font-family-CN-Medium;
    letter-spacing: 3px;
    text-align: center;
    text-shadow: 0 0 16px rgba(52, 109, 255, 0.8), 0 0 16px rgba(52, 109, 255, 0.6);
    background: url('@/assets/images/img/head-bg-c.png') no-repeat center -8px / 1920px;
  }
  .bg-color-white {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 42px;
    background-color: #ffffff0a;
  }
  .bg-color-black {
    position: absolute;
    top: 40px;
    z-index: 1;
    width: 100%;
    height: 35px;
    background-color: #002e3e59;
  }
  .bg-header {
    position: absolute;
    top: -10px;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #002e3e;
    opacity: 1;
    filter: blur(20px);
  }
}
</style>
